<template>
  <public-dialog
    title="更新进度"
    width="30%"
    v-model:visible="visible"
    confirm-button-title="提交"
    @onConfirm="onConfirm"
  >
    <el-form
            label-position="top"
            ref="formRef"
            :model="form"
            :rules="rules"
    >
      <el-form-item label="进度评估" prop="rate">
          <el-input v-model="form.rate" @input="form.rate=limitInputNum(form.rate,3,0,false)" placeholder="请输入进度评估(1~100%)"></el-input>
      </el-form-item>
      <el-form-item label="进度汇报">
          <el-input
                  v-model="form.remark"
                  :autosize="{ minRows: 5, maxRows: 10 }"
                  type="textarea"
                  placeholder="可填写情况说明..."
          ></el-input>
      </el-form-item>
      <el-form-item label="附件">
          <FileMinioUpload
                  :restriction="true"
                  :restrictionLimit="5"
                  v-model:files="form.fileVos"
          />
      </el-form-item>
    </el-form>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {reactive, ref} from "vue";
import {ElForm, ElFormItem, ElMessage} from "element-plus";
import {limitInputNum, resetForm} from "@/common/utils/GlobalUtils";
import {superviseAndHandle} from "@/api/project";
import FileMinioUpload from "@/components/FileMinioUpload.vue";

const visible = ref(false);
const form = reactive({
    superviseId:'',
    rate:'',
    remark:'',
    fileVos:[]
});

const rules = reactive({
    rate: [
        { required: true, message: '进度评估不能为空!', trigger: 'blur' },
    ],
});

const formRef = ref(null);

/**
 * 打开弹窗
 */
const openPopup = (superviseId) => {
    resetForm(form);
    form.superviseId = superviseId;
    visible.value = true;
    setTimeout(()=>{
        formRef.value.clearValidate();
    },20)
}

const uploadRef = ref(null);

const emits = defineEmits(['onSuccess']);

/**
 * 确认
 */
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            superviseAndHandle.updateProgress(form).then(res=>{
                visible.value = false;
                if(res.code==='200'){
                    ElMessage.success('新增成功！');
                    emits('onSuccess');
                }
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

defineExpose({openPopup});
</script>

<style lang="scss" scoped>
.filesContent {
  align-items: center;
  flex-wrap: wrap;
  .files_c_item {
    min-width: 120px;
    padding: 0 30px;
    position: relative;

    .icon_delete {
      position: absolute;
      top: -10px;
      right: 0;
      cursor: pointer;
    }
    .icon_delete:hover {
      color: red;
    }

    .icon_name {
      color: #999;
      cursor: pointer;
    }
    .icon_name:hover {
      color: #fc7018;
    }
  }
}
</style>
